<!--
 * @Description: 工程列表
 * @Author: charles
 * @Date: 2021-12-14 22:06:30
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-05 16:30:57
-->
<template>
  <div class="engineer">
    <!-- 按钮区域 -->
    <div class="btns">
        <el-form :inline="true" :model="params" class="demo-form-inline" size="small">
          <el-form-item >
            <el-select v-model="params.charge_id" placeholder="请选择区域经理" clearable>
            <el-option v-for="(item,index) in charges" 
            :key="index" 
            :label="item.realname" 
            :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item >
            <el-select v-model="params.customer_id" placeholder="请选择客户" clearable>
              <el-option  
              v-for="(item,index) in cutomers"
              :key="index"
              :label="item.realname"
              :value="item.id"></el-option>
            </el-select>
        </el-form-item>
         <el-form-item>
            <el-button type="primary" @click="toSearchHandler">查询</el-button>
        </el-form-item>
         <el-button @click="toAddHandler" type="primary" style="float:right" size="small">录入</el-button>
        </el-form>
    </div>

    <!-- 模态框区域 -->
    <el-dialog @close="dialogCloseHandler" :title="title" :visible.sync="visible">
      <el-form :model="form" :rules="rules" ref="engineerFrom" :inline="true">
      <el-form-item prop="name" label="工程名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item prop="serial_number" label="工程编号" :label-width="formLabelWidth">
        <el-input v-model="form.serial_number" autocomplete="off"></el-input>
      </el-form-item>
       <el-form-item prop="address" label="工程地址" :label-width="formLabelWidth">
        <el-input v-model="form.address" autocomplete="off"></el-input>
      </el-form-item>
       <el-form-item prop="longitude" label="工程经度" :label-width="formLabelWidth">
          <el-input v-model="form.longitude" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item prop="latitude" label="工程纬度" :label-width="formLabelWidth">
          <el-input v-model="form.latitude" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item prop="customer_name" label="客户姓名" :label-width="formLabelWidth">
          <el-input  :disabled="form.id ? true : false" v-model="form.customer_name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item prop="serial_number" label="工程类型"  :label-width="formLabelWidth" >
           <el-select v-model="form.type">
             <el-option label="工地" value="工地"></el-option>
             <el-option label="学校" value="学校"></el-option>
             <el-option label="园区" value="园区"></el-option>
             <el-option label="商场" value="商场"></el-option>
             <el-option label="写字楼" value="写字楼"></el-option>
             <el-option label="事业单位" value="事业单位"></el-option>  
           </el-select>
     </el-form-item>
      <el-form-item prop="address" label="客户电话" :label-width="formLabelWidth">
          <el-input  :disabled="form.id ? true : false" v-model="form.customer_telephone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item prop="charge_id" label="区域经理" :label-width="formLabelWidth">
          <el-select v-model="form.charge_id">
            <el-option v-for="(item,index) in charges"
                        :key="index" 
                        :label="item.realname"
                        :value="item.id"  >
            </el-option>
          </el-select>
      </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="visible = false">取 消</el-button>
    <el-button type="primary" @click="toSubmitHandler">确 定</el-button>
  </div>
</el-dialog>

    <!-- 表格区域 -->
     <el-table
    :data="resData.list"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="工程地址">
            <span>{{ props.row.address }}</span>
          </el-form-item>
          <el-form-item label="工程经度">
            <span>{{ props.row.latitude }}</span>
          </el-form-item>
          <el-form-item label="工程纬度">
            <span>{{ props.row.longitude }}</span>
          </el-form-item>
          <el-form-item label="客户名称">
            <span>{{ props.row.customer_name }}</span>
          </el-form-item>
           <el-form-item label="客户电话">
            <span>{{ props.row.customer_telephone }}</span>
          </el-form-item>
          </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label="工程编号"
      prop="serial_number"
      width="80px" 
      align="center" 
      >
    </el-table-column>
    <el-table-column
      label="工程名称"
      prop="name"
      width="350px" 
      align="center" >
    </el-table-column>
    <el-table-column
      label="工程类型"
      prop="type"
      width="150px"
       align="center" >
    </el-table-column>
    <el-table-column
      label="区域经理"
      prop="charge_name"
      width="150px" 
      align="center" >
    </el-table-column>
    <el-table-column
     label="工程状态"
      prop="status"
      width="120px"
       align="center" >
       <template v-slot="{row}">
          <el-tag v-if="row.status == '未绑定'" type="danger" size="mini">{{row.status}}</el-tag>
          <el-tag v-else-if="row.status == '监测中'" size="mini"  type="success">{{ row.status }}</el-tag>
          <el-tag v-else type="info" size="mini" >{{ row.status }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      align="center"
      >
      <template v-slot="{ row }">
        <el-button  type="text" @click="toEditHandler(row)" size="small">编辑</el-button>
        <el-button  :disable="row.status == '已结束'? true:false" type="text" @click="toBindHandler(row)" size="small">绑定</el-button>
        <el-button  :disable="row.status == '已结束'? true:false" type="text" @click="toEndHandler(row.id)" size="small" style="color:red">结束
        <el-button  type="text" @click="toDeleteHandler(row.id)" size="small" style="color:red">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

   <!-- 分页表格区域 -->
    <el-pagination
    background
    style="margin-top:1em"
     @size-change="handleSizeChange"
     @current-change="handleCurrentChange"
     :current-page="parseInt(resData.page)"
     :page-sizes="[5, 10, 15, 20]"
     :page-size="parseInt(resData.pageSize)"
     layout="total, sizes, prev, pager, next, jumper"
     :total="parseInt(resData.total)">
  </el-pagination>
  </div>
</template>

<script>
//导入工具插件
import { get,postJSON,del} from '@/utils/request.js';
import _ from "lodash";
// import { postJSON } from '../../../../../am-app/src/utils/request';
export default {
  data() {
    return {
       params: {
        page:1,
        pageSize:10,
 },  
          charges: [], // 区域经理
          cutomers: [], // 客户
          resData: {},
          form: {},
          title:'',
          visible:false,//模态框显示与隐藏
          formLabelWidth:"120px", //表单左侧label的宽度    
          rules:{
            name:[
              { required:true , message:'请输入工程名称' , trigger:"blur"}
            ],
            serial_number:[
              { required:true , message:'请输入工程编号' , trigger:"blur"}
            ],
            address:[
              { required:true , message:'请输入工程名称' , trigger:"blur"}
            ],
            type:[
              { required:true , message:'请选择工程类型' , trigger:"change"}
            ],
            latitude:[
              { required:true , message:'请输入经度' , trigger:"blur"}
            ],
            longitude:[
              { required:true , message:'请输入纬度' , trigger:"blur"}
            ],
            customer_name:[
              { required:true , message:'请输入客户名称' , trigger:"blur"}
            ],
            customer_telephone:[
              { required:true , message:'请输入客户电话' , trigger:"blur"}
            ],
            charge_id:[
              { required:true , message:'请选择区域经理' , trigger:"change"}
            ],
          }, 
    }
  },
  methods: {
     pageQueryengineer() {
        get('engineer/pageQuery',this.params).then((res)=>{
        // console.log(res.data.list);
        this.resData = res.data;
   });
  },
   //pageSize改变事件
    handleSizeChange(pageSize) {
      //将分页插件最新的参数赋值给params
      this.params.pageSize = pageSize;
      //调用查询设备的方法（数据重载）
      this.pageQueryengineer();
 },
 //page改变事件
    handleCurrentChange(page) {
      // console.log(page);
      this.params.page = page;
      this.pageQueryengineer();
 },
 //查询按钮事件
    toSearchHandler() {
      //数据重载
      this.pageQueryengineer();
  },
  //查询所有工程信息
    findAllChargesAndCustom() {
      get("/user/pageQuery",{
      page:1,
      pageSize:100,
      role_id:3,
  }).then((res)=>{
    this.charges=res.data.list
  });
   // 查询客户
 get("/user/pageQuery", {
   page: 1,
   pageSize: 100,
   role_id: 4,
 }).then((res) => {
   this.cutomers = res.data.list;
 });
  },
  //添加按钮事件
  toAddHandler() {
    //表单置空
    this.form={},
    //修改标题
    this.title="添加工程";
    this.visible=true;
  },
  //模态框回调
  dialogCloseHandler() {
  },
  //表单按钮确定事件
  toSubmitHandler() {
    postJSON('engineer/saveOrUpdate',this.form).then((res) => {
       // 数据重载
      this.pageQueryengineer();
      // 成功提示
      this.$message.success("操作成功");
      // 关闭模态框
      this.visible = false;
    });
  },
  //编辑按钮事件
  toEditHandler(row) {
    //使用lodash深度克隆方法，拿到row的独立拷贝，this.form和row就不会相互影响
    this.form=_.clone(row);
    this.visible=true;
  },
  //绑定按钮事件
  toBindHandler(row) {
    this.$router.push({
      //跳转至工程（绑定）详情页面
      path:"Details",
      query:row,
    })
  },
  //结束按钮事件
  toEndHandler(id) {
      this.$confirm('此操作将结束该工程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
    type: 'warning'
  }).then(()=>{
    get("/engineer/finish",{id}).then((res)=>{
      //数据重载
      this.pageQueryengineer();
      //提示删除成功
      this.$message.success('工程结束成功')
    })
  })
  },
  //删除事件
toDeleteHandler(id) {
      this.$confirm('此操作将永久删除该工程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        //用户点击确认按钮,然后再做设备的删除
        del("engineer/deleteById",{id}).then((res)=>{
          //数据重载
          this.pageQueryDevices();
          //提示删除成功
          this.$message.success('删除成功')
        })
      })
}
},
   //vue声明周期钩子函数
  created() {
   //页面加载，调用查询设备
    this.pageQueryengineer();
  //查询所有工程信息
    this.findAllChargesAndCustom();
 },
}
</script>